.fx-popover {
  display: inline-block;

  > .fx-popover-reference {
    display: inline-block;
  }

  > .fx-popover-hide {
    width: 0 !important;
    height: 0 !important;
    overflow: hidden;
  }

  > .fx-popover-visible {
    background-color: $popover-background;
    width: 120px;
    display: inline-block;
    position: fixed;
    box-shadow: $border-shadow;
    border: 1px solid $border-color-default;
    border-radius: $border-radius-default;
    padding: 10px;
    transition: all 0.15s;

    > .fx-popover-title {
      padding-bottom: 10px;
      font-size: 16px;
      display: flex;
      align-items: center;

      > .icon-success {
        color: $color-success;
      }

      > .icon-warning {
        color: $color-warning;
      }

      > .icon-error {
        color: $color-error;
      }

      > .icon-primary {
        color: $color-primary;
      }
    }

    > .fx-popover-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    > .fx-popover-tip {
      position: absolute;
      width: 10px;
      height: 10px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      background-color: $popover-background;
      transform: rotate(45deg);

      &.rightTop {
        border-right-color: $popover-background;
        border-top-color: $popover-background;
        top: 10px;
        left: -5px;
      }

      &.right {
        border-right-color: $popover-background;
        border-top-color: $popover-background;
        top: 50%;
        left: -9px;
        transform: rotate(45deg) translateY(-50%);
      }

      &.rightBottom {
        border-right-color: $popover-background;
        border-top-color: $popover-background;
        left: -5px;
        bottom: 10px;
      }

      &.leftTop {
        border-left-color: $popover-background;
        border-bottom-color: $popover-background;
        top: 10px;
        right: -5px;
      }

      &.left {
        border-left-color: $popover-background;
        border-bottom-color: $popover-background;
        top: 50%;
        right: -2px;
        transform: rotate(45deg) translateY(-50%);
      }

      &.leftBottom {
        border-left-color: $popover-background;
        border-bottom-color: $popover-background;
        right: -5px;
        bottom: 10px;
      }

      &.topLeft {
        border-left-color: $popover-background;
        border-top-color: $popover-background;
        bottom: -5px;
        left: 10px;
      }

      &.top {
        border-left-color: $popover-background;
        border-top-color: $popover-background;
        bottom: -9px;
        left: 50%;
        transform: rotate(45deg) translateX(-50%);
      }

      &.topRight {
        border-left-color: $popover-background;
        border-top-color: $popover-background;
        bottom: -5px;
        right: 10px;
      }

      &.bottomLeft {
        border-right-color: $popover-background;
        border-bottom-color: $popover-background;
        top: -5px;
        left: 10px;
      }

      &.bottom {
        border-right-color: $popover-background;
        border-bottom-color: $popover-background;
        top: -2px;
        left: 50%;
        transform: rotate(45deg) translateX(-50%);
      }

      &.bottomRight {
        border-right-color: $popover-background;
        border-bottom-color: $popover-background;
        top: -5px;
        right: 10px;
      }
    }
  }
}
